<template>
  <CommonPage>
    <template #action>
      <n-space>
        <NButton mr-5 type="primary" size="small" @click="handleExportAll">
          <i class="i-fe:cloud-lightning mr-4 text-16" />
          导出全部日志
        </NButton>
        <NButton
          :disabled="selectedIds.length === 0"
          mr-5
          type="error"
          @click="handleDelete(selectedIds)"
        >
          <i class="i-material-symbols:add mr-4 text-18" />
          批量删除
        </NButton>
      </n-space>
    </template>

    <MeCrud
      ref="$table"
      v-model:query-items="queryItems"
      :scroll-x="1200"
      :columns="columns"
      :get-data="api.read"
      @on-checked="onChecked"
    >
      <MeQueryItem label="用户名" :label-width="50">
        <n-input
          v-model:value="queryItems.username"
          type="text"
          placeholder="请输入用户名"
          clearable
        />
      </MeQueryItem>

      <MeQueryItem label="登录IP">
        <n-input v-model:value="queryItems.ip" type="text" placeholder="请输入登录IP" clearable />
      </MeQueryItem>
    </MeCrud>
  </CommonPage>
</template>

<script setup>
import { CommonPage, MeCrud, MeQueryItem } from '@/components'
import { useCrud } from '@/composables'
import { NButton, NTag } from 'naive-ui'
import { UAParser } from 'ua-parser-js'
import { useTemplateRef } from 'vue'
import api from './api'

defineOptions({ name: 'LoginLog' })

const $table = useTemplateRef('$table')
const queryItems = ref({})

onMounted(() => {
  $table.value?.handleSearch()
})

const { handleDelete } = useCrud({
  name: '登录日志',
  doDelete: api.delete,
  refresh: () => $table.value?.handleSearch(),
})

const columns = [
  { type: 'selection' },
  { title: 'ID', key: 'id', width: 80 },
  { title: 'IP', key: 'ip' },
  { title: '登录地点', key: 'ip_location' },
  { title: '操作人员', key: 'username' },
  { title: '操作终端', key: 'os' },
  {
    title: '浏览器',
    key: 'browser',
    render: (row) => {
      if (!row.browser || row.browser === 'Edge') {
        return row.browser
      }
      const browser = UAParser(row.browser).browser
      return browser.name ? `${browser.name}-${browser.version}` : '无'
    },
  },
  {
    title: '状态',
    key: 'status',
    render: row =>
      h(
        NTag,
        {
          size: 'small',
          type: row.status === '1' ? 'success' : 'warning',
        },
        {
          default: () => row.status === '1' ? '登录成功' : '登录失败',
        },
      ),
  },
  { title: '登录时间', key: 'login_at' },
  {
    title: '操作',
    key: 'actions',
    align: 'right',
    hideInExcel: false,
    render(row) {
      return [
        h(
          NButton,
          {
            size: 'small',
            text: true,
            type: 'primary',
            onClick: () => handleDelete([row.id]),
          },
          {
            default: () => '删除',
            icon: () => h('i', { class: 'i-material-symbols:delete-outline text-14' }),
          },
        ),
      ]
    },
  },
]

const selectedIds = ref('')
function onChecked(ids) {
  selectedIds.value = ids.join(',')
}

/**
 * 弹窗确认导出所有数据
 *
 * 该函数用于在用户请求导出所有数据时显示一个确认对话框。如果用户同意导出，
 * 则会尝试调用接口导出接口日志，并在成功时给出相应的提示。
 *
 * 使用$dialog.success显示一个带有确认和取消按钮的对话框，用户可以选择导出或取消。
 * 如果用户选择导出，将调用exportInterfaceLog接口尝试导出数据，并根据导出结果给出相应提示。
 */
function handleExportAll() {
  $dialog.success({
    title: '导出全部数据',
    content: '导出全部数据，可根据上方表单条件导出',
    positiveText: '导出',
    negativeText: '取消',
    onPositiveClick: async () => {
      // 调用导出接口，尝试导出接口日志
      const { message } = await api.exportLoginLogs(queryItems.value)
      $message.success(message)
    },
  })
}
</script>
